<template>
  <div class="container">
    <div v-if="addr!==null" @click="addRess" class="address">
      <div class="nameTel"><p>{{addr.buyPeople}} {{addr.telephone}}</p> </div>
      <div class="addr"><p>{{addr.address}}</p></div>
      <div class="icon">
        <van-icon name="arrow" />
      </div>
    </div>
    <div v-else class="address" @click="addRess" style="font-size: 20px">请选择地址</div>
    <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="bodyItem">
      <div class="goodsItem" v-for="(item,idx) in this.OrderList" :key="idx">
        <div class="goodsImg">
          <img style="width: 100px;height: 90px" :src="item.goods_info.goods_img|changeUrl(that.$baseUrl)">
        </div>
        <div class="detail">
          <div class="title"><p>{{item.goods_info.goods_name}}</p> </div>
          <div class="price">￥{{item.goods_info.goods_price}}   数量:{{item.number}}</div>
        </div>
      </div>
    </div>
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "SubmitOrder",
  props: [],
  data() {
    return {
      addr:null,
      OrderList:[],
      total:0,
      goods_info: [],
      that:this   //项目难点，过滤器内部的this不会指向实例，需要另外传递进去
    }
  },
  created() {
    this.getAddress()
    this.getOrderItem()
  },
  filters:{
    changeUrl(val,baseUrl){
      return baseUrl+val
    }
  },
  methods: {
    createOrder(){
      this.OrderList.forEach((item)=>{
        this.goods_info.push(item.goods_info.id)
      })
      let data={
        status:0,
        total:this.total/100,
        goods_info:JSON.stringify(this.goods_info),
        address_id:this.addr.id
      }
      this.$http.post('/orders',data).then(()=>{

      })
    },
    addRess(){
      this.$router.push('/selectAddress')
    },
    getOrderItem(){
      //获取订单项
      this.$http.get('/carts').then(res=>{
        this.OrderList=res.data.result.list.filter(item=>{
          return item.selected
        })
        this.total=this.OrderList.reduce((total, item) => {
          return total + item.goods_info.goods_price * item.number * 100
        },0)
      })
    },
    getAddress(){
      //获取地址信息
      this.$http.get('/address').then((res)=>{
        res.data.result.some(item=>{
          if(item.selected==true){
            this.addr=item
            return true
          }
        })
      })

    },
    deleteGoods(){
      this.goods_info.forEach(item=>{
        const data={
          state:0
        }
        this.$http.put(`/goods/change/${item}`,data).then(()=>{
        })
      })
    },
    deleteCart(){
      let data={
        ids:this.goods_info
      }
     this.$http.delete('/carts',{data:data}).then(()=>{})
    },
   async onSubmit(){
      //提交订单
     if(this.addr==null){
       Toast('请选择地址信息！');
       return false
     }
     await  this.createOrder()
     await this.deleteGoods()
     await this.deleteCart()
     await this.$router.push('/ToPay')
    },
    onClickLeft() {
      this.$router.push('/Cart')
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 50px 0 50px 0;
  .address{
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
    align-content: space-around;
    padding: 10px 30px;
    .addr{
      margin-top: 10px;
    }
    .icon{
      position: absolute;
      width: 50px;
      height: 50px;
      font-size: 40px;
      right: 60px;
      top: 20px;
      color: #666666;
    }

  }
  .bodyItem {
    .goodsItem {
      height: 100px;
      display: flex;
      flex-direction: row;
      .goodsImg{
        width: 140px;
        background-color: aliceblue;
        display: flex;
        flex-direction: row;
        justify-content: center;
       align-items: center;
      }
      .detail{
        flex: 1;
        height: 100%;
        width: 100%;
        .price{
          width: 95%;
        }
        .title{
          width: 90%;
          height: 60px;
         p{
           line-height: 25px;
           overflow:hidden;
           text-overflow:ellipsis;
           display:-webkit-box;
           -webkit-box-orient:vertical;
           -webkit-line-clamp:2;
           word-wrap: break-word;
         }
        }
      }
    }
  }
}
</style>
